<template>
    <view>
        <!-- 搜索框 -->
        <UserSearch></UserSearch>
        <!-- 内容 -->
       
       
        <view class="main">
            <!-- 左侧 -->
           <view class="left">
                <view class="tittle" 
                :class="current === index ?'active' :''"
                @click="changeColor(index)"
                v-for="(item ,index) in tittie" :key="item">
                    {{item}}
                </view>
           </view>
            <view class="right">
                <view class="group" v-for="item1 in context " :key="item.cat_id">
                    <!-- 标题 -->
                    <view class="titl">
                        {{item1.cat_name}}
                    </view>

                    <view class="constt">
                   <navigator :url="`/pages/good-list/good-list?cid=${item2.cat_id}`" v-for="item2 in item1.children" :key="item2.cat_id">
                    <u-image  :src="item2.cat_icon" mode="widthFix" ></u-image>
                    <view>
                        {{item2.cat_name}}
                    </view>
                      
                   </navigator>
                   
                     
                    </view>
                </view>
            </view>          
        </view>    
    </view>
          
      
</template>
<script>
export default {
    data() {
        return {
            tittie: [],
            context: [],
            current:0
        }
    },
   async onLoad() {
        const res = await this.$u.get('/categories')
        // console.log(res);
        this.cater=res.message
       this.tittie =this.cater.map(v =>  v.cat_name )
       this.context = this.cater[0].children;
    },
    methods: {
        changeColor(index) {
            // console.log(index);
            this.current = index
            this.context = this.cater[index].children;
        }
    },
    
}
</script>
<style lang="scss" scoped>
.main{
    height: calc(100vh - 84rpx);
    display: flex;
    .left{
        overflow: auto;
        width: 182rpx;
        .tittle{    
            height: 70rpx;
            font-size: 28rpx;
        display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .active{
        color:#eb4450
       }
    .right{
       flex: 1;
       overflow: auto;
       padding: 0 48rpx;
       .titl{
        height: 70rpx;
            font-size: 28rpx;
        display: flex;
            justify-content: center;
            align-items: center;
            &::before{
                content: "/";
                

            }
            &::before{
                content: "/";
                margin-right: 10rpx;
            }
            &::after{
                content: "/";
                margin-left: 10rpx;

            }
       }
       
      .constt{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        navigator{
        // border: 1px solid #ccc;
        width: 120rpx;

       }
      }
    }
}

</style>